import React, { useEffect, useState } from "react";
import { Avatar } from "antd";
import config from "../../../config";

const Logo = props => {
  const [userAvatar, setAvatar] = useState();
  const { userData } = props;

  useEffect(() => {
    if (userData.avatar) {
      setAvatar(config.api + userData.avatar);
    } else {
      setAvatar(require("assets/images/me1.jpg"));
    }
  }, [userData.avatar]);

  return (
    <div className="menu-logo">
      <Avatar className="avatar-img" size={90} icon="user" src={userAvatar} />
      <h2 className="logo-title">{userData.name || userData.us}</h2>
    </div>
  );
};

export default Logo;
